<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button @click="destory">Vue</button>
    <p v-show="isShow">XXXXXXXXXXXX</p>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    new Vue({
      data: {
        isShow: true
      },
      methods: {
        destory() {
          this.$destroy()
        }
      },
      //1. 挂载阶段
      beforeCreate() { //不能取到data里的数据
        console.log('beforeCreate');
      },
      created() { //可以取到data里的数据
        console.log('created');
      },
      beforeMount() { //不能通过ref读取页面
        console.log('beforeMount');
      },
      mounted() { //可以通过ref读取页面 通常用来发送ajax请求，启动定时器等异步处理
        this.interval = setInterval(function() {
          this.isShow = !this.isShow
        }.bind(this), 1000)
      },
      beforeDestroy() { //通常用来做收尾工作 例如清除定时器
        console.log('beforeDestroy');
        clearInterval(this.interval)
      },
      destroyed() {
        console.log('destroyed');
      }
    }).$mount('div')
  </script>
</body>
</html>